//1. 引入路由
import Vue from "vue";
import VueRouter from "vue-router";

/* 
  当打包构建应用时，js包会变得非常大，影响页面加载，影响页面加载，如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了
  结合 Vue 的异步组件 (opens new window)和 webpack 的代码分割功能 (opens new window)，轻松实现路由组件的懒加载
*/

const Home = () => import('../views/Home')
const Login = () => import('../views/Login')
const News = () => import('../views/Home/components/News')
const Music = () => import('../views/Home/components/Music')
const Game = () => import('../views/Home/components/Game')
const GameItem = () => import('../views/Home/components/Game/Item')

//2. 把路由作为插件使用
Vue.use(VueRouter);

//3. 实例化路由得到路由对象
const router = new VueRouter({
    //设置路由模式为history模式!!!!
    mode: "history",
    //使用routes配置项配置路由表
    routes: [
        {
            path: "/home",
            component: Home,
            //如果当前的路由设置有默认子路由,则不建议书写name命名路由
            // name: "Home",
            //默认子路由配置方式2
            redirect: "/home/news",
            children: [
                {
                    //二级路由及多级路由的path两种写法:1.完整的路径  2.只写当前二级路由的字符串地址,不带/
                    path: "news",
                    component: News,
                    name: "News",
                    meta: {
                        icon: 'xxx',
                        title: '新闻'
                    }
                },
                {
                    path: "music",
                    component: Music,
                    name: "Music",
                },
                {
                    path: "game",
                    component: Game,
                    name: "Game",
                    children: [
                        {
                            path: 'item/:id/:title?',
                            component: GameItem,
                            meta: {
                                icon: 'xxx1',
                                title: 'Item组件'
                            },
                            props($route) {
                                return {
                                    ...$route.params,
                                    ...$route.query,
                                    a: 1
                                }
                            },
                            beforeEnter(to, from, next) {
                                console.log('item的路由独享守卫', to, from);
                                next()
                            }
                        }
                    ]
                },
                //默认子路由配置方式1
                /*  {
                  path: "",
                  redirect: "/home/news",
                }, */
            ],
        },
        {
            path: "/login",
            component: Login,
            name: "Login",
        },
        //匹配默认路由
        {
            path: "/",
            //重定向的配置
            redirect: "/home",
        },
    ],
});

/*
  全局前置守卫(beforeEach)：只要当一个导航触发的时候，全局前置守卫按照创建顺序调用
  全局解析守卫(beforeResolve)：在所有组件内守卫和异步路由组件被解析之后，解析守卫就会被调用0(并没有渲染)
  全局后置钩子(afterEach)：当整个导航全局结束的时候触发，这些钩子不会接收next函数也不会改变导航本身（只能做收尾工作）
  路由独享守卫(beforeEnter)：设置给某一个固定的路由的路由表中，当当前的路由被触发的时候，路由独享守卫就会在进入路由之前触发
*/

// 一般来说路由守卫都会接收一个回调函数作为参数，糊掉函数接收3个参数
// 1.to：要去的路由的路由对象
// 2.from：来的路由的路由对象
// 3.next函数，是否放行的函数
// 书写路由全局前置守卫
router.beforeEach((to, from, next) => {
    console.log('全局前置守卫1', to, from);
    next()
})
router.beforeEach((to, from, next) => {
    console.log('全局前置守卫2', to, from);
    next()
})
router.beforeEach((to, from, next) => {
    console.log('全局前置守卫3', to, from);
    next()
})

// 书写路由全局解析守卫
router.beforeResolve((to, from, next) => {
    console.log('全局解析守卫', to, from);
    next()
})

//书写路由全局后置钩子
router.afterEach((to, from) => {
    console.log('全局后置钩子', to, from);
})


export default router;
